<template>
  <div
    :style="{width: width ? (typeof width === 'number' ? (width+'px') : width) :'100%'}"
  >
    <tiny-select
      :size="size"
      clearable
      :modelValue="modelValue"
      :placeholder="placeholder"
      :searchable="true"
      :multiple="multiple"
      :show-empty-image="true"
      collapse-tags
      @change="change"
    >
      <tiny-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </tiny-option>
    </tiny-select>
  </div>
</template>
<script  >
import { Select, Option } from '@opentiny/vue'
export default {
  components: {
    TinySelect: Select,
    TinyOption: Option
  },
  props: {
    list: {type: Array, default: () => []},
    modelValue: {type: [Array, String, Number], default: () => []},
    width: { type: [Number, String], default: '' },
    placeholder: { type: [Number, String], default: '' },
    size: { type: [Number, String], default: 'small' },
    multiple: { type: Boolean, default: true },
  },
  emits: ['update:modelValue'],
  data() {
    return {
      options: [
        { id: '陈列', name: '陈列' },
        { id: '销量', name: '销量' },
        { id: '合同', name: '合同' },
        { id: '开业', name: '开业' },
        { id: '赠饮', name: '赠饮' },
        { id: '搭赠', name: '搭赠' },
        { id: '代赠', name: '代赠' }
      ],
      value: '',
      multivalue: []
    }
  },
  methods: {
    change (val) {
      this.$emit('update:modelValue', val)
    }
  }
}
</script>
<style scoped lang="scss">

</style>